<template>
  <div class="app-container">

    <div class="filter-container" v-if="baseData">
      <div>
        <el-date-picker
          v-model="listQuery.checktime"
          type="daterange"
          range-separator="至"
          class="filter-item"
          style="width:300px"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>

        <br />
        <el-select
          v-model="listQuery.type"
          multiple
          filterable
          default-first-option
          placeholder="请选择文章标签">
          <el-option
            v-for="item in baseData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" @click="submit"  style="margin-left:20px">
          搜索
        </el-button>
          <el-button type="danger" @click="clear()">
            重置所有
          </el-button>
        <el-button
          type="primary"
          v-if="listdata.length>0"
          icon="el-icon-paperclip"
          @click="explortExcel"
        >
          导出
        </el-button>

        <el-button
          type="success"
          @click="loadLog"
        >
          载入上次搜索标签
        </el-button>

      </div>

    </div>

    <el-table
      v-loading="listLoading"
      :data="listdata"
      element-loading-text="Loading"
      border
      fit
      id="table"
      height="100%"
      class="table-container"
      ref="customerReportDateTable"
      highlight-current-row

    >
      <el-table-column>
      <template slot="header" slot-scope="scope">
        <div style="font-weight: bold;font-size:20px;padding:5px 0;text-align:center;">领域数据</div>
      </template>

      <el-table-column
        width="280"
        label="领域"
        align="center"
        prop="name"
      >
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>




      <el-table-column
        width="100"
        label="咨询量"
        align="center"
      >
        <template slot-scope="scope">
          <span v-for="role in scope.row.data"> {{role.type==1?role.count:''}}</span>
        </template>
      </el-table-column>


      <el-table-column
        width="100"
        label="建言量"
        align="center"
      >
        <template slot-scope="scope">
          <span v-for="role in scope.row.data"> {{role.type==2?role.count:''}}</span>
        </template>
      </el-table-column>



      <el-table-column
        width="100"
        label="投诉量"
        align="center"
      >
        <template slot-scope="scope">
          <span v-for="role in scope.row.data"> {{role.type==3?role.count:''}}</span>
        </template>
      </el-table-column>

      <el-table-column
        width="100"
        label="求助量"
        align="center"
      >
        <template slot-scope="scope">
          <span v-for="role in scope.row.data"> {{role.type==4?role.count:''}}</span>
        </template>
      </el-table-column>

      <el-table-column
        width="100"
        label="感谢数"
        align="center"
      >
        <template slot-scope="scope">
          <span v-for="role in scope.row.data">{{role.type==5?role.count:''}}</span>
        </template>
      </el-table-column>

      <el-table-column
        width="100"
        label="总受理量"
        align="center"
      >
        <template slot-scope="scope">
          {{scope.row.sum}}
        </template>
      </el-table-column>
      </el-table-column>
    </el-table>


    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />

  </div>
</template>
<style lang="less">
.el-descriptions-item__content {
  font-size: 14px;
}

.el-drawer__body {
  &::-webkit-scrollbar {
    width: 5px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    //border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #999;
  }

  &::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //border-radius: 10px;
    background: #fefefe;
  }
}
</style>
<style scoped lang="less">
/deep/ .el-select{
  width:800px;
}
</style>
<script>
import Pagination from '@/components/Pagination'
import { getAllly,getdiyclassify } from '@/api/wz'
import exportExecl from '@/utils/excel'

let id = 0
export default {
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      list: [],
      listLoading: false,
      listdata:[],
      listQuery: {
        page: 1,
        limit: 20,
        checktime:'',
        type:''
      },
      baseData: [],
      loading: false,
    }
  },
  updated() {

    this.$nextTick(() => {

      this.$refs.customerReportDateTable.doLayout()

    })

  },
  created() {
    this.WzParams()

  },
  methods: {
    loadLog(){
      let searchLog = localStorage.getItem('diyrank_type') || [];
      if(searchLog){
        console.log(searchLog)
        this.$set(this.listQuery,'type',JSON.parse(searchLog))
      }else{
        this.$message.error('没有搜索记录!')
        return false
      }
    },
    clear(){
      this.listQuery={
          type:  [],
          checktime:''
      }
    },
    search() {
      this.fetchData()
    },

    refresh() {
      this.listQuery = {
        page: 1,
        limit: 20
      }
      localStorage.setItem('wzbaseData', '')
      this.fetchData()
      this.WzParams()
    },
    WzParams() {
      // let getAllly = localStorage.getItem('getAllly')
      // if (!getAllly) {
      //   getAllly().then(response => {
      //     this.baseData = response.data
      //     localStorage.setItem('getAllly', JSON.stringify(this.baseData))
      //   })
      // } else {
      //   this.baseData = JSON.parse(getAllly)
      // }
      getAllly().then(response => {
        this.baseData = response.data
        // localStorage.setItem('getAllly', JSON.stringify(this.baseData))
      })
    },
    fetchData(column) {
      this.listLoading = true
    },
    explortExcel() {
      let fileName = '领域数据导表'
      exportExecl('table', fileName + '.xlsx')
    },
    submit() {
      this.listLoading = true
      localStorage.setItem('diyrank_type',JSON.stringify(this.listQuery.type))
      getdiyclassify(this.listQuery).then(response => {
        for(let i=0;i<response.data.length;i++){
          if(response.data[i].top==1){
            response.data[i].name = this.baseData.find((item)=>item.value==response.data[i].id).label
          }
        }
        console.log( response.data)
        this.listdata  = response.data;
        this.listLoading = false
      })
    },

  }
}
</script>
